import {
  DatePicker,
  SelectPicker,
  Cascader,
  Input,
  RadioGroup,
  Radio,
  List,
} from 'rsuite'
import Placeholder from './Placeholder'
import regions from '../../data/region.json'
import { useState } from 'react'

const careerInfos = [
  { label: '应届毕业生', value: 0 },
  { label: '1年工作经验', value: 1 },
  { label: '3年以下工作经验', value: 2 },
  { label: '3-5年工作经验', value: 3 },
  { label: '资深', value: 4 },
]

const getBirthdayString = (timestamp) => {
  const d = new Date(timestamp)
  return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`
}

const getAddressString = (code, regions, parent={name: ''}) => {
  for(let i=0; i<regions.length; i++) {
    const item = regions[i]
    if (item.code === code) {
      return parent.name + item.name
    } else if(item.children?.length > 0) {
      const name = getAddressString(code, item.children, item)
      if (name !== undefined) return parent.name + name
    }
  }
}

// console.log(getAddressString('510303', regions))

const Display = ({ data }) => {
  return data ? (
    <List>
      <List.Item>姓名：{data.name}</List.Item>
      <List.Item>
        性别：
        {data.gender === '1' ? '男'
                      : data.gender === '2' ? '女' : '未选择'}
      </List.Item>
      <List.Item>
        生日：{getBirthdayString(data.birthday)}
      </List.Item>
      <List.Item>
        工作经验：{
          careerInfos.find(
            (info) => info.value === data.career
          )?.label
        }
      </List.Item>
      <List.Item>
        地址：{getAddressString(data.address, regions)}
      </List.Item>
      <List.Item>
        自我介绍：{data.desc}
      </List.Item>
    </List>
  ) : null
}

const Edit = ({ data = {}, onSubmit, onCancel }) => {
  const [local, setLocal] = useState(data)

  const update = (fieldName) => (value) =>
    setLocal({ ...local, [fieldName]: value })
  return (
    <div>
      <div className="mb-3">
        <label className="form-label">姓名</label>
        <Input size="md" value={local.name} onChange={update('name')} />
      </div>
      <div className="mb-3">
        <label className="form-label">性别</label>
        <div>
          <RadioGroup
            name="gender"
            inline
            value={local.gender}
            onChange={update('gender')}
          >
            <Radio value="1">男</Radio>
            <Radio value="2">女</Radio>
          </RadioGroup>
        </div>
      </div>
      <div className="mb-3">
        <label className="form-label">生日</label>
        <DatePicker
          size="md"
          block
          value={local.birthday}
          onChange={update('birthday')}
        />
      </div>
      <div className="mb-3">
        <label className="form-label">工作经验</label>
        <SelectPicker
          value={local.career}
          onChange={update('career')}
          data={careerInfos}
          block
          size="md"
          searchable={false}
        />
      </div>
      <div className="mb-3">
        <label className="form-label">地址</label>
        <Cascader
          value={local.address}
          onChange={update('address')}
          data={regions}
          labelKey="name"
          valueKey="code"
          block
          size="md"
          searchable={false}
        />
      </div>
      <div className="mb-3">
        <label className="form-label">自我介绍</label>
        <Input
          as="textarea"
          size="md"
          onChange={update('desc')}
          value={local.desc}
        />
      </div>
      <div className="mb-3">
        <button className="btn btn-primary" onClick={() => onSubmit(local)}>
          确认
        </button>{' '}
        <button className="btn btn-danger" onClick={onCancel}>
          取消
        </button>
      </div>
    </div>
  )
}

const Empty = ({ onEdit }) => {
  return (
    <Placeholder
      onEdit={onEdit}
      text="完善你的个人信息"
      slogan="采采产保景伯行？风则突无六才理民免亡袋明满？目统模复往您鞋队阳？飞奖天恩黑姆在治寻。兰苏旧生卖长。除转岁含更预腿音狗队料里似群。"
    />
  )
}

const Standard = ({ data, isEdit, onSubmit, onCancel, onEdit }) => {
  return (
    <>
      {!isEdit && !data && <Empty onEdit={onEdit} />}
      {data && !isEdit && <Display data={data} />}
      {isEdit && <Edit {...{ data, onSubmit, onCancel }} />}
    </>
  )
}

export default Standard
